<template>
	<view class="home">
		<swiper indicator-dots="true" circular="true" autoplay="true">
			<swiper-item v-for="item in slideshows" :key="item.id">
				<image :src="qiniu_domain+item.img_url"></image>
			</swiper-item>
			<!-- <swiper-item>
				<image src="../../static/imgs/dog.jpg"></image>
			</swiper-item>
			<swiper-item>
				<image src="../../static/imgs/cat.jpg"></image>
			</swiper-item> -->
		</swiper>
		<!-- 导航区域 -->
		<view class="nav">
			<view class="nav_item" v-for="(item,index) in navs" :key="index" @click="navItemClick(item.path)">
				<view :class="item.icon"></view>
				<text>{{item.title}}</text>
			</view>
		</view>
		<!-- 推荐热卖 -->
		<view class="hot_goods">
			<view class="hot_title">推荐&emsp;热卖</view>
			<goods-list @goodsItemClick="toGoodsDetail" :goods="goods"></goods-list>
		</view>

	</view>

</template>

<script>
	import goodsList from "../../components/goods-list.vue"
	export default {
		data() {
			return {
				host: getApp().globalData.host,
				slideshows: [],
				goods: [

				],
				qiniu_domain: getApp().globalData.qiniu_domain,
				navs: [{
						icon: 'iconfont icon-ziyuan',
						title: '零食',
						path: '/pages/goods/goods'
					},
					{
						icon: 'iconfont icon-guanyuwomen',
						title: '鲜果',
						path: '/pages/fruits/fruits'
					},
					{
						icon: 'iconfont icon-tupian',
						title: '新品',
						path: '/pages/new/new'
					},
					{
						icon: 'iconfont icon-tupian',
						title: '其他',
						path: '/pages/others/others'
					},
					{
						icon: 'iconfont icon-shipin',
						title: '预约',
						path: '/pages/appointment/appointment'
					}
				]
			}
		},
		components: {
			"goods-list": goodsList
		},
		onLoad() {
			this.getSlideshow()
		},
		methods: {
			navItemClick(url) {
				// let pages = getCurrentPages()  //获取点击时的页面url
				// console.log(pages[0].route)

				// console.log(url)
				uni.navigateTo({
					url
				})
			},
			getSlideshow() {
				uni.request({
					url: this.host + "/api/slide",
					success: (res) => {
						// console.log(res.data)
						if (res.data.data.code == 0) {
							return uni.showToast({
								title: "获取数据失败"
							})
						}
						this.slideshows = res.data.data.slides
					}
				})
			},
			// async getSlideshow(){
			// 	const res = await this.$Request({
			// 		url:"/json"
			// 	})
			// 	console.log(res)
			// }
			toGoodsDetail(id) {
				uni.navigateTo({
					url: "/pages/goods-detail/goods-detail?id=" + id
				})
			},

		}
	}
</script>

<style lang="scss">
	.home {
		swiper {
			width: 750rpx;
			height: 380rpx;

			image {
				width: 100%;
				height: 100%;
			}
		}

		.nav {
			display: flex;

			.nav_item {
				width: 25%;
				text-align: center;

				view {
					width: 80rpx;
					height: 80rpx;
					background: #FF6A6A;
					border-radius: 40rpx;
					margin: 2px auto 0;
					line-height: 80rpx;
					color: #fff;
					font-size: 30rpx;
				}

				// .icon-tupian{
				// 	font-size: 45rpx;
				// }
				text {
					font-size: 30rpx;
				}
			}
		}

		.hot_goods {
			background: #eee;
			overflow: hidden;
			margin-top: 10rpx;

			.hot_title {
				height: 60rpx;
				line-height: 60rpx;
				font-weight: 400;
				color: #FF6A6A;
				text-align: center;
				letter-spacing: 30rpx;
				background: #fff;
				margin-top: 6rpx;
			}
		}
	}
</style>
